<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height: 2000px;">
    一.Bom --window
    
    二.浏览器尺寸:
    可视区:浏览器里面用户能够看到的区域
    innerHeight innerWidth(包含滚动条的)
    clientHeight  clientWidth(不包含滚动条的)

    <script>
        console.log(window.innerHeight);
        console.log(document.documentElement.clientHeight);
    </script>

    三.浏览器卷去的尺寸
    <script>
        document.documentElement.scrollTop:浏览器高度被卷去的尺寸
        document.documentElement.scrollLeft:浏览器宽度被卷去的尺寸
        滚动到哪里:顶部:document.documentElement.scrollTop=0
        设置卷去的尺寸为0,滚动到顶部

        滚动到哪里:
        window.scrollTo(x,y)
        window.scrollTo({left:xx,top:yy})
        Behavior:"smooth"
    </script>

    四.location对象--重点对象
    1.协议:http/ftp
    2.域名:IP地址(127.0.0.1)
    3.端口:8080/443 端口范围0-65535
    4.路径:找到文件地址用/分割
    5.数据:通过?拼接在地址栏里面 多条数据&
    6.哈希:锚点#abc

    操作地址栏:
    location.href 浏览器的地址栏的内容
    location.search() 获取地址栏的数据,包含问号
    location.hash() 获取哈希
    reload(true) 刷新页面,重新加载


    五.history对象:历史对象
    记录了用户曾经去浏览过的一些网页或者内容,实现浏览器的前进或者后退

    history.length:历史对象中缓存了多少个的url
    history.go(number)
    history.back()
    history.forward()

    六.window对象的其他方法
    alert()
    confirm()
    prompt()
    open()
    close()
    最常用方法window.setInterval setTimeout


    七.Dom 文档对象模型
    document对象,是浏览器的一内置对象

    dom名称
    标签:tagName 元素:element
    节点:元素节点 div p
        属性节点:href /target
        文本节点:标签里面的每一个内容
    
    八.dom元素的获取
    8-1.getElementById() 获取特定ID元素的节点
    8-2.getElementsByTagName() 获取相同的元素的节点列表,返回类数组,使用[0]来获取
    8-3.getElementsByClassName() 获取相同类名节点列表,返回类数组[IE8以下不支持的]
    8-4.querySelector() 通过选择器来获取元素,如果获取多个只返回第一个
    <script>
        console.log(document.querySelector('.header ul li'));
    </script>
    8-5.querySelectorAll() 通过选择器来获取元素,如果获取多个返回的类数组
    <script>
        console.log(document.querySelector('.header ul'));
    </script>

    九.操作元素里面的内容
    innerHTML:读写元素的节点的内容
    innerText:读写某个元素节点的文本内容
    outerHTML:除了包含innerHTML全部内容之外,还包含元素节点本身

    十.操作元素的属性
    getAttribute() 获取元素节点的属性的值,包含自定义和默认属性
    setAttribute() 设置元素节点的属性的值,包含自定义和默认属性
    removeAttribute() 获取元素节点的属性的值,包含自定义和默认属性

    通过点和中括号操作的属性
    但是没有办法通过点或者中括号获取到自定义的属性

    dataset
    data- 前缀,进行设置我们自己的自定义的属性,来进行数据的存放

</body>
</html>